<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <b class="line"></b>
    <div class="clear"></div>
    <div class="take-delivery" style="height:400px">
      <div class="status">
        <h2>您已成功付款</h2>
        <div class="successInfo">
          <ul>
            <li>付款金额<em>¥{{validateMode.total_amount}}</em></li>
            <template v-if="paytype=='alipay'">
              <div v-if="success">
                <div class="user-info">
                  <p>收货人：{{checkAddr.name}}</p>
                  <p>联系电话：{{checkAddr.phone}}</p>
                  <p>收货地址：{{checkAddr.province}} {{checkAddr.city}} {{checkAddr.county}} {{checkAddr.details}}</p>
                </div>
                请认真核对您的收货信息，如有错误请联系客服
              </div>
              <div style="height:50px;line-height:50px" v-else>
                {{msg}},付款金额已转入<router-link :to="{name:'account'}" style="color:red">用户余额</router-link>
              </div>
            </template>
          </ul>
          <div class="option" v-if="success">
            <span class="info">您可以</span>
            <a href="javascript:;;" class="J_MakePoint" v-on:click="toOrder(validateMode.orderId)">查看<span>交易详情</span></a>
          </div>
        </div>
      </div>
    </div>
    <foot></foot>
    <navfull></navfull>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'paysuccess',
  data () {
    return {
      validateMode: {},
      msg: "",
      checkAddr: {},
      success: true,
      paytype: ""
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.validate();
  },
  methods: {
    validate () {
      var validateMode = this.validateMode;
      validateMode.total_amount = this.$route.query.total_amount;
      this.paytype = this.$route.query.paytype;
      if (this.paytype == "balance") {
        validateMode.orderId = this.route.query.order_id;
      } else {
        validateMode.trade_no = this.$route.query.trade_no;
        validateMode.out_trade_no = this.$route.query.out_trade_no;
        validateMode.seller_id = this.$route.query.seller_id;
        validateMode.total_amount = this.$route.query.total_amount;
        validateMode.timestamp = this.$route.query.timestamp;
        this.axios.post("/trade/pay/result/validate",
          validateMode).then((res) => {
            var result = res.data;
            validateMode.orderId = result.id;
            if (result.code == 200) {
              var addrId = result.data.addressId;
              this.axios.get("/user/address/address", {
                params: {
                  id: addrId
                }
              }).then((res) => {
                var result = res.data;
                if (result.code == 200) {
                  this.checkAddr = result.data;
                }
              })
            } else {
              if (result.msg == "success") {
                this.$router.push({
                  name: "order"
                })
                return;
              }
              this.msg = result.msg;
              this.success = false;
            }
          })
      }
    },
    toOrder (orderId) {
      this.$router.push({
        name: "orderinfo",
        query: {
          orderId: orderId
        }
      })
    },
  }
}
</script>

<style scoped>
@import "../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../assets/css/sustyle.css";
@import "../../../assets/css/demo.css";
</style>
